/* Map集合的api */
const { log } = console
// 1、 创建map集合，调用set和get方法，查看size属性
let f1 = () => {
  let map = new Map()
  // 添加元素
  map.set('CN', '中国')
  map.set('USA', '美国')
  map.set('FC', '法国')
  map.set('US', '英国')
  map.set('RS', '俄国')
  map.set('RS', '俄罗斯')
  // 获得元素
  let value = map.get('RS')
  log(value) // 俄罗斯
  // 元素的个数
  log(map.size) // 5
}

// 2. clear() 清空集合
let f2 = () => {
  let map = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3],
  ])
  // 遍历map
  for (let [k, v] of map) {
    log(`${k} = ${v}`) // a = 1  b = 2  c = 3
  }
  // 清空集合
  map.clear()
  log(map) // Map {}
  log(typeof map) // object
}

// 3. delete(key) 根据key删除元素 ，has(key)判断是否有key对应的元素
let f3 = () => {
  let map = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3],
  ])
  if (map.has('a')) {
    map.delete('a')
  }
  log(map) // Map { 'b' => 2, 'c' => 3 }
}

// 4. forEach()
let f4 = () => {
  let map = new Map([
    ['CN', '中国'],
    ['USA', '美国'],
    ['FC', '法国'],
    ['US', '英国'],
    ['RS', '俄罗斯'],
  ])
  map.forEach((v, k) => {
    log(`${k} = ${v}`)
  })
}

// 5. keys() values() entries()
let f5 = () => {
  let map = new Map([
    ['CN', '中国'],
    ['USA', '美国'],
    ['FC', '法国'],
    ['US', '英国'],
    ['RS', '俄罗斯'],
  ])
  log('------------------keys()-----------------')
  let keys = map.keys()
  for (let item of keys) {
    log(item)
  }
  log('------------------values()-----------------')
  let values = map.values()
  for (let item of values) {
    log(item)
  }
  log('------------------entries()-----------------')
  let entries = map.entries()
  for (let [k, v] of entries) {
    log(`${k} = ${v}`)
  }
}
// f5()

/*
 task:
  1. 通过id作为key,对象作为value,存储到map中,
  2. 此对象有id:number,name:string[3-12]字母,gender:string,age:[18-25],info(){log(this)},phone:1[3-9]\d{9}
  3. 随机产生107个对象，存放到map中
  4. 遍历map中的对象，通过表格动态把对象信息渲染到页面中
 */

let task = () => {
  // 字母字符串
  const STR = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  // 声明一个map集合
  const map = new Map()
  // 获得3-12位随机字符的名称
  function getName() {
    let str = ''
    let len = Math.floor(Math.random() * (12 - 3 + 1)) + 3
    for (let i = 0; i < len; i++) {
      str += STR[Math.floor(Math.random() * STR.length)]
    }
    return str
  }
  // 获得随机的电话号码
  function getPhoneNumber() {
    let phone = '1'
    phone += Math.floor(Math.random() * (9 - 3 + 1)) + 3
    for (let i = 0; i < 9; i++) {
      phone += Math.floor(Math.random() * 10)
    }
    return phone
  }
  // 定义渲染函数
  function rander(user) {
    let users = $('.users')
    let tr = `
      <tr>
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.age}</td>
        <td>${user.phone}</td>
        <td>${user.gender}</td>
        <td>
          <button class="del" data-id="${user.id}" >删除</button>
        </td>
      </tr>
      `
    users.append(tr)
  }

  // 组装map数据
  ;(function () {
    let id = 1
    for (let i = 0; i < 107; i++) {
      let obj = {
        info() {
          console.log(this)
        },
      }
      obj.id = id
      obj.age = Math.floor(Math.random() * (25 - 18 + 1)) + 18
      obj.gender = Math.random() > 0.6 ? '男' : '女'
      obj.name = getName()
      obj.phone = getPhoneNumber()
      map.set(id, obj)
      id++
    }
  })()
  // 遍历map进行渲染
  function init() {
    // 渲染之前先清空表格
    $('.users').find('tr').not(':first').remove()
    // 遍历集合，渲染表格
    map.forEach((v) => {
      rander(v)
    })
    // 删除操作
    $('.del').click(function () {
      let id = +$(this).attr('data-id')
      map.delete(id)
      init()
    })
  }
  init()
}
// task()

// task2. 把map转对象
let task2 = () => {
  let map = new Map([
    ['CN', '中国'],
    ['USA', '美国'],
    ['FC', '法国'],
    ['US', '英国'],
    ['RS', '俄罗斯'],
  ])
  let obj = new Object()
  map.forEach((v, k) => {
    obj[k] = v
  })
  log(obj) // { CN: '中国', USA: '美国', FC: '法国', US: '英国', RS: '俄罗斯' }
}

// task3. 把对象转map
let task3 = () => {
  let obj = { CN: '中国', USA: '美国', FC: '法国', US: '英国', RS: '俄罗斯' }
  let keys = Object.keys(obj)
  let map = new Map()
  for (let k of keys) {
    map.set(k, obj[k])
  }
  log(map)
}
// task3()

// task4. map转换为数组
let task4 = () => {
  let map = new Map([
    ['CN', '中国'],
    ['USA', '美国'],
    ['FC', '法国'],
    ['US', '英国'],
    ['RS', '俄罗斯'],
  ])
  let list = [...map]
  log(list)
}
// task4()

// task5. 二维数组转map
let task5 = () => {
  let list = [
    ['CN', '中国'],
    ['USA', '美国'],
    ['FC', '法国'],
    ['US', '英国'],
    ['RS', '俄罗斯'],
  ]
  let map = new Map(list)
  log(map)
}
task5()
